<template>
  <view class="article">
    <uni-nav-bar class="nav-bar" :class="showNavBar ? 'show' : ''" :statusBar="true" :border="false" rightWidth="180rpx"
                 backgroundColor="transparent">
      <template v-slot:left>
        <view class="back" @click="back">
          <uni-icons class="icon" :color="showNavBar ? '#333333' : '#ffffff'" type="left" size="48rpx"></uni-icons>
        </view>
      </template>
      <template v-slot:default>
        <view class="title">
          <text class="text">{{ title }}</text>
        </view>
      </template>
    </uni-nav-bar>
    <view class="cover" :class="{ placeholder: !coverImage.show, 'not-cover': !coverImage.exists }">
      <image v-if="formData && formData.good_cover" class="img" :class="coverImage.show ? 'show' : ''" :src="formData.good_cover"
             mode="aspectFill" @load="setCoverImageSize" :style="{ width: `100%`, height: `99%` }"></image>
      <!--          :style="{width: `${coverImage.width}px`, height: `${coverImage.height}px`}"-->

      <view class="mask"></view>
    </view>
    <template v-if="!loading && formData">
      <view class="meta">
        <view class="title">
          <text class="text">{{ formData.name }}</text>
        </view>
        <view class="excerpt">
          <text class="text">{{ formData.content }}</text>
        </view>
        <view class="author">
          <template v-if="formData.author">
            <text class="at">{{ formData.author || '' }}</text>
            <text class="split">·</text>
          </template>
          <text class="date">{{ publishTime(formData.updated_at) }}</text>
        </view>
      </view>
      <view class="content">
        <rich-text :nodes="formData.longContent" space ></rich-text>
      </view>
    </template>
    <view class="detail-loading" v-else>
      <uni-icons type="spinner-cycle" size="35px"/>
    </view>
  </view>
</template>

<script>
import API from '@/json/json.js'
import translatePublishTime from "@/pages/photo/common/publish-time";
export default {
  components: {},
  data() {
    return {
		loading: false,
      showNavBar: false, // 是否显示导航栏
      coverImage: { // 封面图片相关信息
        url: '', // 图片链接
        exists: true, // 是否存在
        show: false, // 是否显示
        width: 1, // 宽度
        height: 1 // 高度
      },
      id: "", // 文章ID
      title: "", // 文章标题
      formData: {}, // 表单数据

      // 广告相关配置
      adpId: "", // TODO: 请填写广告位ID
      watchAdUniqueType: "device" // TODO: 观看广告的唯一标识类型，可选值为 user 或者 device，user 表示用户唯一，device 表示设备唯一
    }
  },
  computed: {},
  onReady() {
    // 开始加载数据，修改 where 条件后才开始去加载 clinetDB 的数据 ，需要等组件渲染完毕后才开始执行 loadData，所以不能再 onLoad 中执行
    if (this.id) { // ID 不为空，则发起查询
      this.loadData(this.id)
    } else {
      uni.showToast({
        icon: 'none',
        title: 'id 不能为空'
      })
    }
  },
  onLoad(event) {
    //获取文章id，通常 id 来自上一个页面
    if (event.id) {
      this.id = event.id
    }
  },
  onUnload() {
    
  },
  onPageScroll(e) {
    // 计算封面高度
    const coverHeight = this.coverImage.height - 100 > 0 ? this.coverImage.height - 100 : 200
    // 根据滚动位置判断是否显示导航栏
    if (e.scrollTop > coverHeight) {
      this.showNavBar = true
    } else {
      this.showNavBar = false
    }
  },
  methods: {
    // 将时间戳转换为可读的时间格式
    publishTime(timestamp) {
      return translatePublishTime(timestamp)
    },
    // 返回上一页或者跳转到文章列表页
    back() {
      // 获取当前页面数量
      const pages = getCurrentPages().length
      // 定义文章列表页的路径
      const pageUrl = '/pages/photo/index'

      // 如果当前页面数量大于1，返回上一页
      if (pages > 1) {
        uni.navigateBack({})
      } else { // 否则跳转到文章列表页
        uni.redirectTo({
          url: pageUrl,
          fail: (e) => {
            // 如果跳转失败，说明当前页面是tabbar页面，需要使用switchTab跳转
            if (e.errMsg.indexOf('tabbar') !== -1) {
              uni.switchTab({
                url: pageUrl
              })
            }
          }
        })
      }
    },
    // 将文章加入阅读历史
    setReadHistory() {
      // 获取阅读历史缓存，如果不存在则为空数组
      const historyCache = uni.getStorageSync('readHistory') || []
      // 过滤掉当前文章的阅读历史
      const readHistory = historyCache.filter(item => item.article_id !== this.id)
      // 将当前文章的阅读历史添加到数组最前面
      readHistory.unshift({
        article_id: this.id,
        last_time: Date.now()
      })
      // 将更新后的阅读历史缓存到本地
      uni.setStorageSync('readHistory', readHistory)

    },
    // 加载数据
    loadData(id) {
		var items = API.Index_item
		for(var i in items){
			if(id == items[i].id){
				this.formData = items[i]
				break;
			}
		}
      // 如果封面不存在，则不显示封面图片
      if (!this.formData.good_cover) {
        this.coverImage.exists = false
      }
      // 设置文章标题
      this.title = this.formData.name

      // 将文章添加进阅读历史
      this.setReadHistory()
    },
    // 设置封面图片的大小
    setCoverImageSize(e) {
      const {width, height} = e.detail // 获取图片的宽和高
      uni.getSystemInfo({ // 获取系统信息
        success: ({windowWidth}) => { // 获取系统信息成功
          this.coverImage.width = windowWidth // 将封面图片的宽度设置为窗口宽度
          this.coverImage.height = (windowWidth / width) * height // 封面高度；将封面图片的高度设置为宽高比乘以窗口宽度
          this.coverImage.show = true // 显示封面图片
        }
      })

    },
  }

}
</script>

<style scoped lang="scss">

page{
	background-color: #fff !important;
}

/* #ifdef APP-NVUE */
.article {
  background-color: #fff;
}

/* #endif */

@mixin cp {
  padding: 0 40rpx;
}

.article {
  background-color: #fff;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;

  .back {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .75);
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
      transform: translate(-2rpx, 2rpx);
      /* #ifdef APP-NVUE */
      transform: translate(-2rpx, 0);
      /* #endif */
    }
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    text-align: center;
    /* #ifndef APP-NVUE */
    height: 100%;
    width: 100%;
    /* #endif */
    /* #ifdef APP-NVUE */
    height: 44px;

    /* #endif */
    .text {
      font-size: 32rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* #ifndef APP-NVUE */
      display: block;
      width: 100%;
      /* #endif */
      /* #ifdef APP-NVUE */
      lines: 1
      /* #endif */
    }
  }

  &.show {
    background-color: #fff;

    .back {
      background-color: transparent;
    }

    .title {
      opacity: 1;

      .text {
        color: #333;
      }
    }
  }
}

.detail-loading {
  margin: 100rpx auto 0;
  width: 35px;
  height: 35px;
  animation: rotate360 2s linear infinite;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
    transform-origin: center center;
  }

  100% {
    transform: rotate(360deg);
    transform-origin: center center;
  }
}

.cover {
  position: relative;
  z-index: 0;
  background: #fff;
  transition: height .1s;
  height: 421rpx;
  overflow: hidden;

  &.placeholder {
    //height: 600rpx;
  }

  &.not-cover {
    background: transparent;
    //height: 200rpx;

    .img {
      display: none;
    }
  }

  .img {
    opacity: 0;
    transition: opacity .3s;

    &.show {
      opacity: 1;
    }
  }

  .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-image: linear-gradient(to bottom, transparent, #fff);
  }
}

.meta {
  @include cp;
  margin-top: -40rpx;
  position: relative;
  z-index: 1;

  .title {
    .text {
      font-size: 44rpx;
      line-height: 66rpx;
      font-weight: bold;
    }
  }

  .excerpt {
    margin-top: 10rpx;

    .text {
      font-size: 26rpx;
      line-height: 40rpx;
      color: #666;
    }
  }

  .author {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    margin-top: 20rpx;

    .at,
    .split,
    .date {
      font-size: 26rpx;
      color: #999;
    }

    .split {
      margin: 0 10rpx;
    }
  }
}

.content {
  @include cp;
  margin-top: 40rpx;
  padding-bottom: 80rpx;
}
</style>
